<template>
    <div class="search-component">
        <div class="search-form">
            <div class="search-form-row">
                <div class="search-form-item">
                    查询时间 <a-range-picker v-model:value="value1" :locale="locale" />
                </div>
                <div class="search-form-item">
                    地区
                    <a-radio-group v-model:value="value2" button-style="solid">
                        <a-radio-button value="a">北京</a-radio-button>
                        <a-radio-button value="b">上海</a-radio-button>
                    </a-radio-group>
                </div>
            </div>
            <div class="search-form-row">
                <div class="search-form-item">
                    <div class="search-form-item">
                        更新日期 <a-range-picker v-model:value="value1" :locale="locale" />
                    </div>
                </div>
            </div>

        </div>

        <div class="search-button">
            <div class="left-button">
                <a-button type="primary">搜索</a-button>
                <a-button class="reset-button">重置</a-button>
                <a-button>展开</a-button>
                <a-button type="primary" disabled>Primary(disabled)</a-button>
            </div>
            <div class="right-button">
                <a-button>设置筛选项</a-button>
            </div>
        </div>
    </div>


</template>

<script setup lang="ts">
import { ref } from 'vue';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
// 设置 dayjs 语言为中文
dayjs.locale('zh-cn');

const value1 = ref<any>(null);
const value2 = ref<any>(null);
</script>

<style lang="less" scoped>

.search-component {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;

    .search-button {
        display: flex;
        justify-content: space-between;
        border: 1px solid red;
        width: 100%;
        .left-button {
            display: flex;
            gap: 10px;
            align-items: center;
        }
    }

    .search-form {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        flex-direction: column;

        .search-form-row {
            display: flex;
            gap: 10px;
            align-items: center;

        }

    }
}

.reset-button {
    background-color:rgba(0, 0, 0, 0.04)  
    
}


</style>